<script setup lang="ts">
import { signupSelectSignup } from "@/apis/signup";
import { reactive } from "vue";

const list = reactive<
	{
		signup_id: number;
		user_id: number;
		parent_phone_number: number;
		origin: string;
		party_affiliation: string;
		major: string;
		awards: string;
		personal_evaluation: string;
		personal_intentions: string;
	}[]
>([]);
init();
async function init() {
	const { data } = await signupSelectSignup({ page_number: 1, page_size: 20 });
	list.push(...data.data.list);
}
</script>

<template>
	<div class="student-management">
		<div class="tool">
			<button class="success">新增报名记录</button>
			<button class="success">批量新增报名记录</button>
		</div>
		<table>
			<thead>
				<tr>
					<th>监护人手机号</th>
					<th>籍贯</th>
					<th>政治面貌</th>
					<th>专业</th>
					<th>获奖荣誉</th>
					<th>个人意向</th>
					<th>个人评价</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="v in list" :key="v.signup_id">
					<td>{{ v.parent_phone_number }}</td>
					<td>{{ v.origin }}</td>
					<td>{{ v.party_affiliation }}</td>
					<td>{{ v.major }}</td>
					<td>{{ v.awards }}</td>
					<td>{{ v.personal_intentions }}</td>
					<td>{{ v.personal_evaluation }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<style scoped lang="scss">
.student-management {
	padding: 10px;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	.tool {
		display: flex;
		align-items: center;
		column-gap: 10px;
		button {
			flex: 0 1 auto;
		}
	}
}
</style>
